<template>
	<view class="add-task">
		<uni-icons fontFamily="iconfont" :size="28" color="#626262">{{'\ue741'}}</uni-icons>
		<textarea auto-height auto-focus v-model="taskContent" class="task-context" placeholder="添加任务" />
		<uni-icons fontFamily="iconfont" :size="32" @tap="addNewItem" :color="taskContent?'#2979ff':'#bbb'">{{'\ue610'}}</uni-icons>
	</view>
</template>

<script>
	import {
		mapActions,
		mapMutations
	} from 'vuex';
	export default {

		data() {
			return {
				taskContent: "",
			}
		},
		methods: {
			...mapMutations('taskStore', ['addTaskItem']),
			addNewItem() {
				if (!this.taskContent) return
				this.addTaskItem({ props: { taskContent: this.taskContent }, refresh: true })
				this.taskContent = ""
				this.$emit("close")
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.add-task {
		padding: 24upx 40upx 32upx 40upx;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 20px;
		width: 100%;
		display: flex;
		align-items: center;

		.task-context {
			flex: 1;
			margin-left: 24upx;
		}
	}
</style>